<%@ page import="static sun.font.LayoutPathImpl.getPath" %><%--
  Created by IntelliJ IDEA.
  User: lkl
  Date: 2024/7/1
  Time: 21:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="jakarta.tags.core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
    <base href="<%=basePath%>">
    <meta charset="utf-8"/>
    <link rel="apple-touch-icon" sizes="76x76" href="assets/img/123.png">
    <link rel="icon" type="image/png" href="assets/img/123.png">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <title>NEFU计算机与控制工程学院软件工程专业</title>
    <!--<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport'/>-->
    <!-- Google Font -->
    <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700|Source+Sans+Pro:400,700" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
    <link rel="stylesheet" href="Bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="Bootstrap/font/bootstrap-icons.css">
    <!-- Main CSS -->
<%--    <link rel="stylesheet" href="./assets/css/index.css"/>--%>
    <style>
        *{
            margin: 0;
            padding: 0;
            text-decoration: none;
            list-style: none;
        }

        body {
            font-family: 'Source Sans Pro', sans-serif;
            color: #333;
        }


        /*.text-dark:hover {*/
        /*    color: #025d45;*/
        /*    text-decoration: underline;*/
        /*}*/



        /*导航*/
        /*.bg-body-tertiary*/
        /*{*/
        /*    background-color: transparent !important;*/
        /*    .navbar-collapse{*/
        /*        flex-grow: 0;*/
        /*    }*/
        /*}*/

        .bg-body-tertiary {
            background-color: transparent !important;
        }

        .bg-body-tertiary .navbar-collapse {
            flex-grow: 0;
        }


        /*轮播图区域 小于768高度250，大于等于768高度400，大于等于992高度500 */
        /*.carousel*/
        /*{*/
        /*    !*响应式用媒体查询*!*/
        /*    @media (max-width: 768px) {*/
        /*        .carousel-item{*/
        /*            height: 250px;*/
        /*        }*/
        /*    }*/

        /*    @media (min-width: 768px) {*/
        /*        .carousel-item{*/
        /*            height: 400px;*/
        /*        }*/
        /*    }*/

        /*    @media (min-width: 992px) {*/
        /*        .carousel-item{*/
        /*            height: 470px;*/
        /*        }*/
        /*    }*/
        /*    .carousel-item{*/
        /*        !*height: 500px;*!*/
        /*        background-size: cover;*/
        /*        background-position: center 0;*/
        /*    }*/
        /*    .carousel-item:nth-child(1)*/
        /*    {*/
        /*        background-image: url("assets/img/index/banner_1.png");*/
        /*        !*background-image: url("assets/img/index/banner_1.png");*!*/
        /*    }*/
        /*    .carousel-item:nth-child(2)*/
        /*    {*/
        /*        background-image: url("assets/img/index/banner_2.jpg");*/
        /*        !*background-image: url("assets/img/index/banner_2.jpg");*!*/
        /*    }*/
        /*    .carousel-item:nth-child(3)*/
        /*    {*/
        /*        background-image: url("assets/img/index/banner_3.jpg");*/
        /*        !*background-image: url("assets/img/index/banner_3.jpg");*!*/
        /*    }*/
        /*    .carousel-item:nth-child(4)*/
        /*    {*/
        /*        !*background-image: url("assets/img/index/banner_4.jpg");*!*/
        /*        background-image: url("assets/img/index/banner_4.jpg");*/
        /*    }*/
        /*}*/


        .carousel .carousel-item {
            /* 所有轮播图项目共有的样式 */
            height: 500px; /* 默认高度，可以在这里设置或根据媒体查询覆盖 */
            background-size: cover;
            background-position: center 0;
        }

        /* 媒体查询：小于768px的屏幕 */
        @media (max-width: 767px) {
            .carousel .carousel-item {
                height: 250px;
            }
        }

        /* 媒体查询：大于等于768px且小于992px的屏幕 */
        @media (min-width: 768px) and (max-width: 991px) {
            .carousel .carousel-item {
                height: 400px;
            }
        }

        /* 媒体查询：大于等于992px的屏幕 */
        @media (min-width: 992px) {
            .carousel .carousel-item {
                height: 500px;
            }
        }

        /* 特定轮播图项目的背景图像 */
        .carousel .carousel-item:nth-child(1) {
            background-image: url("assets/img/index/banner_1.png");
        }

        .carousel .carousel-item:nth-child(2) {
            background-image: url("assets/img/index/banner_2.jpg");
        }

        .carousel .carousel-item:nth-child(3) {
            background-image: url("assets/img/index/banner_3.jpg");
        }

        .carousel .carousel-item:nth-child(4) {
            background-image: url("assets/img/index/banner_4.jpg");
        }
        /*专业介绍*/


        .container1{
            margin-top:60px;
            background-color: #c2eadb;
            height: 400px;
        }

        .lside{
            display: inline-block;
            width: 700px;
            padding:10px 30px;
            text-align: center;
        }

        .xuyuan{
            margin-bottom: 0px;
            padding: 10px 0px;
        }

        .zhuanye
        {
            padding: 20px 10px;
            margin-bottom: 0px;
        }

        .rside{
            display: inline-block;
            float: right;
        }

        .btn {
            background-color: #1b1e21;
            color: white;
            padding: 0.5rem 1rem;
            text-decoration: none;
            border-radius: 4px;
            transition: background-color 0.3s ease;
        }

        .btn:hover {
            background-color:#728fcb;
        }

        .home{
            height: 400px;
            /*width: 700px;*/
        }

        /*开源项目*/
        /*视口大于992，一行4个 col-lg-3
        视口大于768，一行2个  col-md-6*/

        /*.project*/
        /*{*/
        /*    margin-top: 60px;*/
        /*    text-align: center;*/
        /*    .row{*/
        /*        div{*/
        /*            margin-bottom: 10px;*/
        /*            height: 200px;*/
        /*            !*background-color: pink;*!*/
        /*            a {*/
        /*                !*块级的宽度和父级一样大*!*/
        /*                display: block;*/
        /*                height: 200px;*/
        /*                background-color: green;*/
        /*                border-radius: 4px;*/
        /*            }*/

        /*            &:nth-child(1) a{*/
        /*                background-color: #70c3ff;*/
        /*            }*/
        /*            &:nth-child(2) a{*/
        /*                background-color: #fd6a7f;*/
        /*            }*/
        /*            &:nth-child(3) a{*/
        /*                background-color: #7f8ea0;*/
        /*            }*/
        /*            &:nth-child(4) a{*/
        /*                background-color: #89d04f;*/
        /*            }*/
        /*        }*/
        /*    }*/
        /*}*/

        .project {
            margin-top: 60px;
            text-align: center;
        }

        .project .row div {
            margin-bottom: 10px;
            height: 200px;
        }

        .project .row div a {
            display: block;
            height: 200px;
            background-color: green;
            border-radius: 4px;
        }

        /* 针对不同子元素的背景颜色 */
        .project .row div:nth-child(1) a {
            background-color: #70c3ff;
        }

        .project .row div:nth-child(2) a {
            background-color: #fd6a7f;
        }

        .project .row div:nth-child(3) a {
            background-color: #7f8ea0;
        }

        .project .row div:nth-child(4) a {
            background-color: #89d04f;
        }

        /*作品*/
        /*视口大于992，一行4个 col-lg-3
        /*视口大于768，一行2个  col-md-6*!*/

        /*.product*/
        /*{*/
        /*    margin-top: 60px;*/
        /*    text-align: center;*/
        /*    .row{*/
        /*        div{*/
        /*            margin-bottom: 10px;*/
        /*            height: 200px;*/
        /*            !*background-color: pink;*!*/
        /*            a {*/
        /*                !*块级的宽度和父级一样大*!*/
        /*                display: block;*/
        /*                height: 200px;*/
        /*                background-color: green;*/
        /*                border-radius: 4px;*/
        /*            }*/

        /*            &:nth-child(1) a{*/
        /*                background-color: #70c3ff;*/
        /*            }*/
        /*            &:nth-child(2) a{*/
        /*                background-color: #fd6a7f;*/
        /*            }*/
        /*            &:nth-child(3) a{*/
        /*                background-color: #7f8ea0;*/
        /*            }*/
        /*            &:nth-child(4) a{*/
        /*                background-color: #89d04f;*/
        /*            }*/
        /*        }*/
        /*    }*/
        /*    margin-bottom: 60px;*/
        /*}*/

        .product {
            margin-top: 60px;
            text-align: center;
            margin-bottom: 60px; /* 从内部移动到外部，避免重复 */
        }

        .product .row div {
            margin-bottom: 10px;
            height: 200px;
        }

        .product .row div a {
            display: block;
            height: 200px;
            background-color: green;
            border-radius: 4px;
        }

        /* 为每个子元素的a标签设置不同的背景颜色 */
        .product .row div:nth-child(1) a {
            background-color: #70c3ff;
        }

        .product .row div:nth-child(2) a {
            background-color: #fd6a7f;
        }

        .product .row div:nth-child(3) a {
            background-color: #7f8ea0;
        }

        .product .row div:nth-child(4) a {
            background-color: #89d04f;
        }

        /*新闻公告*/
        .font-weight-bold {
            font-weight: 700 !important;
        }
        .spanborder span {
            display: inline-block;
            padding-bottom: 20px;
            margin-bottom: -1px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.44);
        }
        .spanborder {
            margin-bottom: 2rem;
            border-bottom: 1px solid rgb(232, 243, 236);
        }

        .container{
            a{
                /*color: #025d45; !* 悬浮时的颜色 *!*/
                text-decoration: none;
            }
        }




        ol.list-featured li::before {
            content: "0" counter(my-awesome-counter);
            font-weight: bold;
            font-size: 3rem;
            margin-right: 0.5rem;
            font-family: "Abril Fatface", serif;
            line-height: 1;
        }
        ol.list-featured li {
            counter-increment: my-awesome-counter 1;
            display: flex;
            font-size: 0.8rem;
        }
        li {
            text-align: -webkit-match-parent;
        }
        ol.list-featured {
            counter-reset: my-awesome-counter 0;
            padding-left: 0px;
            list-style: none;
        }




        .footer{
            margin-top: 60px;
            height: 150px;
            background-color: #F5F5F5;
            text-align: center;
        }
        .service{
            padding: 30px 0px;
            height: 60px;
            border-bottom:1px solid #E8E8E8 ;
        }
        .copyright
        {
            padding:  0px 0px;
            height:30px;
            border-bottom:1px solid #E8E8E8 ;
        }
        .maker
        {
            padding: 0px 0px;
            height: 60px;
            border-bottom:1px solid #E8E8E8 ;
        }


        html {
            font-family: sans-serif;
            line-height: 1.15;
            -webkit-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
            -ms-overflow-style: scrollbar;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

        /*@-ms-viewport {*/
        /*    width: device-width; }*/

        article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
            display: block; }

        body {
            margin: 0;
            font-family: "Source Sans Pro", "Segoe UI", "Helvetica Neue", "Arial";
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.6;
            color: #212529;
            text-align: left;
            background-color: #fff; }


        [tabindex="-1"]:focus {
            outline: 0 !important; }

        hr {
            box-sizing: content-box;
            height: 0;
            overflow: visible; }

        h1, h2, h3, h4, h5, h6 {
            margin-top: 0;
            margin-bottom: 0.5rem; }
        h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
            margin-bottom: 0.5rem;
            font-family: inherit;
            font-weight: 500;
            line-height: 1.2;
            color: inherit;
        }

        p {
            margin-top: 0;
            margin-bottom: 1rem; }

        abbr[title],
        abbr[data-original-title] {
            text-decoration: underline;
            -webkit-text-decoration: underline dotted;
            text-decoration: underline dotted;
            cursor: help;
            border-bottom: 0; }

        address {
            margin-bottom: 1rem;
            font-style: normal;
            line-height: inherit; }

        ol,
        ul,
        dl {
            margin-top: 0;
            margin-bottom: 1rem; }

        ol ol,
        ul ul,
        ol ul,
        ul ol {
            margin-bottom: 0; }

        dt {
            font-weight: 700; }

        dd {
            margin-bottom: .5rem;
            margin-left: 0; }

        blockquote {
            margin: 0 0 1rem; }

        dfn {
            font-style: italic; }

        b,
        strong {
            font-weight: bolder; }

        small {
            font-size: 80%; }

        sub,
        sup {
            position: relative;
            font-size: 75%;
            line-height: 0;
            vertical-align: baseline; }

        sub {
            bottom: -.25em; }

        sup {
            top: -.5em; }

        a {
            /*color: #03a87c;*/
            text-decoration: none;
            background-color: transparent;
            -webkit-text-decoration-skip: objects; }

        a:hover {
            color: #025d45;
            text-decoration: underline;
            /*color: #025d45;*/
        }

        a:not([href]):not([tabindex]) {
            color: inherit;
            text-decoration: none; }
        a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus {
            color: inherit;
            text-decoration: none; }
        a:not([href]):not([tabindex]):focus {
            outline: 0; }

        pre,
        code,
        kbd,
        samp {
            font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
            font-size: 1em; }

        pre {
            margin-top: 0;
            margin-bottom: 1rem;
            overflow: auto;
            -ms-overflow-style: scrollbar; }

        figure {
            margin: 0 0 1rem; }

        img {
            vertical-align: middle;
            border-style: none; }

        svg {
            overflow: hidden;
            vertical-align: middle; }

        table {
            border-collapse: collapse; }

        caption {
            padding-top: 0.75rem;
            padding-bottom: 0.75rem;
            color: #6c757d;
            text-align: left;
            caption-side: bottom; }

        th {
            text-align: inherit; }

        label {
            display: inline-block;
            margin-bottom: 0.5rem; }

        button {
            border-radius: 0; }

        button:focus {
            outline: 1px dotted;
            outline: 5px auto -webkit-focus-ring-color; }

        input,
        button,
        select,
        optgroup,
        textarea {
            margin: 0;
            font-family: inherit;
            font-size: inherit;
            line-height: inherit; }

        button,
        input {
            overflow: visible; }

        button,
        select {
            text-transform: none; }

        button,
        html [type="button"],
        [type="reset"],
        [type="submit"] {
            -webkit-appearance: button; }

        button::-moz-focus-inner,
        [type="button"]::-moz-focus-inner,
        [type="reset"]::-moz-focus-inner,
        [type="submit"]::-moz-focus-inner {
            padding: 0;
            border-style: none; }

        input[type="radio"],
        input[type="checkbox"] {
            box-sizing: border-box;
            padding: 0; }

        input[type="date"],
        input[type="time"],
        input[type="datetime-local"],
        input[type="month"] {
            -webkit-appearance: listbox; }

        textarea {
            overflow: auto;
            resize: vertical; }

        fieldset {
            min-width: 0;
            padding: 0;
            margin: 0;
            border: 0; }

        legend {
            display: block;
            width: 100%;
            max-width: 100%;
            padding: 0;
            margin-bottom: .5rem;
            font-size: 1.5rem;
            line-height: inherit;
            color: inherit;
            white-space: normal; }

        progress {
            vertical-align: baseline; }

        [type="number"]::-webkit-inner-spin-button,
        [type="number"]::-webkit-outer-spin-button {
            height: auto; }

        [type="search"] {
            outline-offset: -2px;
            -webkit-appearance: none; }

        [type="search"]::-webkit-search-cancel-button,
        [type="search"]::-webkit-search-decoration {
            -webkit-appearance: none; }

        ::-webkit-file-upload-button {
            font: inherit;
            -webkit-appearance: button; }

        output {
            display: inline-block; }

        summary {
            display: list-item;
            cursor: pointer; }

        template {
            display: none; }

        [hidden] {
            display: none !important; }



        :root {
            --blue: #7832e2;
            --pink: #ff0266;
            --red: #ea2f65;
            --yellow: #ffde03;
            --green: #03a87c;
            --teal: #09ebaf;
            --gray-dark: #343a40;
            --light-blue: #e8f3ec;
            --primary: #03a87c;
            --secondary: #7832e2;
            --success: #03a87c;
            --info: #09ebaf;
            --warning: #ffde03;
            --danger: #ea2f65;
            --light: #f8f9fa;
            --dark: #212529;
            --white: #fff;
            --purple: #ad6edd;
            --salmon: #ff977a;
            --cyan: #35bdff;
            --gray: #ced4da;
            --indigo: #502c6c;
            --orange: #fbb500;
            --lightblue: #e8f3ec;
            --breakpoint-xs: 0;
            --breakpoint-sm: 576px;
            --breakpoint-md: 768px;
            --breakpoint-lg: 992px;
            --breakpoint-xl: 1200px;
            --font-family-sans-serif: "Source Sans Pro", "Segoe UI", "Helvetica Neue", "Arial";
            --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        }

        .custom-link
        {
            transition: transform 0.3s ease;
        }

        .custom-link:hover {
            color: #025d45 !important;
            text-decoration: underline !important;
            font-size: 24px;
        }
        /* 定义过渡效果 */
        a{
            transition: transform 0.3s ease;
            /* 可以添加其他基础样式，如颜色、边框等 */
        }

        /* 定义悬浮时的样式 */
        a:hover {
            transform: scale(1.2); /* 你可以根据需要调整这个值 */
            text-decoration: none!important;

        }

       .i-subject-wrap {
            border: 1px solid #e4ecf3;
            border-radius: 4px;
            background-color: #fff;
            /*overflow: hidden;*/
            margin-bottom: 10px;
        }

        .i-subject-wrap .i-subject-head {
            height: auto;
            overflow: hidden;
        }
        .i-desc {
            margin: 10px;
            color: #313131!important;
            font-size: 14px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .i-subject-head img {
            width: 100%!important;
            -webkit-transition: -webkit-transform 1s;
        }

        .i-project .i-art-wrap .i-ad-img img{
            height: 100%;
            vertical-align:middle!important;
            border: 0;
        }
        img{
            vertical-align:middle!important;
            border: 0;
        }
        h3, .h3 {
            font-size: 24px;
        }
        h1, .h1, h2, .h2, h3, .h3 {
            margin-top: 20px;
            margin-bottom: 10px;
        }
        h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
            font-family: inherit;
            font-weight: 500;
            line-height: 1.1;
            color: inherit;
        }
        .i-art-wrap p {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        p {
            margin: 0 0 10px;
        }
        .light {
            cursor: pointer;
            position: absolute;
            left: -100%;
            top: 0;
            width: 100%;
            height: 100%;
            background-image: -webkit-linear-gradient(0deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.5),hsla(0,0%,100%,0));
            transform: skewx(-25deg);
            -o-transform: skewx(-25deg);
            -moz-transform: skewx(-25deg);
            -webkit-transform: skewx(-25deg);
        }
        i {
            font-style: italic;
        }
    </style>
</head>
<body>

<!--导航-->
<nav class="navbar navbar-expand-lg bg-body-tertiary fixed-top">
    <div class="container">
        <a class="navbar-brand" href="index.html"><img src="assets/img/index/logodouble.png" alt=""></a>
        <a class="navbar-brand" href="introduction"><strong>软件工程专业(SE)</strong></a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="introduction">专业介绍</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="lab">实验室</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="teacher">教师队伍</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="job">就业指南</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="listNews">新闻</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="listNotice">公告</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="login">登录</a>
                </li>
            </ul>
        </div>
    </div>
</nav>



<!--轮播图区域-->
<div id="carouselExampleIndicators" class="carousel slide">
    <div class="carousel-indicators">
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4"></button>
    </div>
    <div class="carousel-inner">
        <div class="carousel-item active">

        </div>
        <div class="carousel-item">

        </div>
        <div class="carousel-item">

        </div>
        <div class="carousel-item">

        </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>
</div>


<!--专业介绍-->
<div class="container1">
    <div class="lside">
        <h2 class="xuyuan">
            东北林业大学
            <br>计算机与控制工程学院
            <br>软件工程专业
        </h2>
        <p class="zhuanye" style="text-align: left;text-indent: 2em;">
            软件工程专业以IT业需求为导向，培养具有良好综合素质和职业道德，掌握扎实的基础理论和专业知识，具有软件分析、设计、开发、测试与管理能力，具备较强工程实践能力、技术创新能力和团队精神，能快速适应软件工程新技术发展并具有国际视野和国际竞争力的高级软件工程师。专业实施灵活的“211”人才培养模式，在教学上着力推动基于问题、基于项目和基于案例的学习，对于实践性强的课程，采取校企联合“双师制”培养，同时以大学生创新实践活动、科技大赛为补充，突出工程化培养。
        </p>
        <a href="introduction" class="btn">Read More</a>
    </div>
    <div class="rside">
        <img src="" class="home">
    </div>
</div>


<!--开源项目-->
<div class="project container">
    <div class="title">
        <h2>
            Opensource/开源项目
        </h2>
        <p>
            种类众多的开源项目，让你爱不释手
        </p>
    </div>
    <div class="content" style="margin-top: 20px;">
        <div class="row">
            <div class="col-lg-3 col-md-6"><a href="#"><article class="i-art-wrap art1">
                <div class="i-ad-img">
                    <img src="http://cdn.alloyteam.com/assets/img/omi-be3d88.png" alt="" style="margin-top: 25px;">
                    <h3>OMI</h3>
                    <p>开放现代的Web组件化框架</p>
                    <i class="light"></i>
                </div>
            </article>
            </a></div>
            <div class="col-lg-3 col-md-6"><a href="#">
                <article class="i-art-wrap art2">
                    <div class="i-ad-img">
                        <img src="http://cdn.alloyteam.com/assets/img/alloyimage-3f4c70.png" alt="" style="margin-top: 25px;">
                        <h3>AlloyImage</h3>
                        <p>HTML5专业级图像处理引擎</p>
                        <i class="light"></i>
                    </div>
                </article>
            </a></div>
            <div class="col-lg-3 col-md-6"><a href="#">
                <article class="i-art-wrap art3">
                    <div class="i-ad-img">
                        <img src="http://cdn.alloyteam.com/assets/img/alloytouch-3364a5.png" alt="" style="margin-top: 15px;width: 75px;">
                        <h3>AlloyTouch</h3>
                        <p>丝般顺滑的触摸运动方案</p>
                        <i class="light"></i>
                    </div>
                </article>
            </a></div>
            <div class="col-lg-3 col-md-6"><a href="#">
                <article class="i-art-wrap art4">
                    <div class="i-ad-img">
                        <img src="http://cdn.alloyteam.com/assets/img/sodalogo-4d18ed.png" alt="" style="margin-top: 15px;width: 75px;">
                        <h3>Soda</h3>
                        <p>高性能模版引擎</p>
                        <i class="light"></i>
                    </div>
                </article>
            </a></div>
        </div>
    </div>
    <a href="#" class="btn" style="background-color: darkgray;white-space: pre;margin-top: 15px;">更多开源  ></a>
</div>


<!--作品-->
<div class="product container">
    <div class="title">
        <h2>
            Product/作品
        </h2>
        <p>
            新奇好玩的作品，让你欲罢不能
        </p>
    </div>
    <div class="content" style="margin-top: 20px;">
        <div class="row">
            <div class="col-lg-3 col-md-6" ><a href="#">
                <div class="i-subject-wrap">
                    <div class="i-subject-head">
                        <img src="http://cdn.alloyteam.com/assets/img/codetank-eeb277.jpg" alt="">
                    </div>
                    <p class="i-desc">
                        CodeTank
                    </p>
                    <p class="i-desc">
                        全世界首个Javascript程序员的在线编程对战游戏
                    </p>
                </div>

            </a></div>
            <div class="col-lg-3 col-md-6"><a href="#">
                <div class="i-subject-wrap">
                    <div class="i-subject-head">
                        <img src="http://cdn.alloyteam.com/assets/img/alloyphoto-cd4563.jpg" alt="">
                    </div>
                    <p class="i-desc">
                        AlloyPhoto
                    </p>
                    <p class="i-desc">
                        专业在线图像处理App
                    </p>
                </div>

            </a></div>
            <div class="col-lg-3 col-md-6"><a href="#">
                <div class="i-subject-wrap">
                    <div class="i-subject-head">
                        <img src="	http://cdn.alloyteam.com/assets/img/alloydesigner-8020c7.png
" alt="">
                    </div>
                    <p class="i-desc">
                        AlloyDesigner
                    </p>
                    <p class="i-desc">
                        新概念web开发工具
                    </p>
                </div>
            </a></div>
            <div class="col-lg-3 col-md-6"><a href="#">
                <div class="i-subject-wrap">
                    <div class="i-subject-head">
                        <img src="http://cdn.alloyteam.com/assets/img/alloystick-d2c55e.jpg" alt="">
                    </div>
                    <p class="i-desc">
                        AlloyStick
                    </p>
                    <p class="i-desc">
                        HTML5骨骼动画引擎
                    </p>
                </div>
            </a></div>
        </div>
    </div>
    <a href="#" class="btn" style="background-color: darkgray;white-space: pre;margin-top: 90px;">更多作品  ></a>
</div>


<form action="index" method="get">
    <!--新闻公告-->
    <div class="container">
        <div class="row justify-content-between">
            <div class="col-md-8">
                <h5 class="font-weight-bold spanborder"><span>新闻</span></h5>
                <c:forEach items="${newss}" var="n">
                    <div class="mb-3 d-flex justify-content-between">
                        <div class="pr-3">
                            <h2 class="mb-1 h4 font-weight-bold">
                                <a class="text-dark custom-link" href="getnews?nid=${n.nid}">${n.title}</a>
                            </h2>
                            <div class="card-text text-muted small">
                                    ${n.author}
                            </div>
                            <small class="text-muted">${n.dateTime}</small>
                        </div>
                    </div>
                </c:forEach>
            </div>

            <div class="col-md-4 pl-4">
                <h5 class="font-weight-bold spanborder"><span>公告</span></h5>
                <ol class="list-featured">
                    <c:forEach items="${notices}" var="n">
                        <li>
                        <span>
                        <h6 class="font-weight-bold">
                        <a href="getnotice?nid=${n.nid}" class="text-dark custom-link">${n.title}</a>
                        </h6>
                        <div class="card-text text-muted small">
                                ${n.author}
                        </div>
                        <small class="text-muted">${n.dateTime}</small>
                        </span>
                        </li>
                    </c:forEach>
                </ol>
            </div>
        </div>
    </div>
</form>


<!--------------------------------------
FOOTER
--------------------------------------->

<div class="footer border-top">
    <div class="wrapper">
        <!--		服务-->
        <div class="service">
            服务于NEFU CCEC SE
        </div>
    </div>
    <!--		版权-->
    <div class="copyright">
        版权所有 2024 东北林业大学计算机与控制工程学院软件工程专业
    </div>
    <div class="maker">
        Copyright &copy; Li KunLong
    </div>
</div>
</div>

<script src="assets/js/vendor/jquery.min.js" type="text/javascript"></script>
<script src="assets/js/vendor/popper.min.js" type="text/javascript"></script>
<script src="assets/js/vendor/bootstrap.min.js" type="text/javascript"></script>
<script src="assets/js/functions.js" type="text/javascript"></script>
<script src="Bootstrap/js/bootstrap.min.js"></script>

<script>
    // 等待DOM加载完成
    document.addEventListener('DOMContentLoaded', function() {
        // 获取轮播组件的DOM元素
        var carousel = document.getElementById('carouselExampleIndicators');
        // 初始化轮播组件
        var carouselInstance = new bootstrap.Carousel(carousel, {
            interval: 2000, // 轮播时间间隔，单位毫秒
            ride: 'carousel' // 启用自动轮播
        });
    });
</script>
</body>
</html>
